@import "./../theme";
@import "./../var";
@import "./widget-vars";

.widget-grid {
  padding: $widget-item-common-padding;
  background: $widget-container-bg;
  position: relative;
  border-radius: $radiusRegular;
  margin-top: $widget-item-common-margin;

  .widget-grid-row {
    flex-wrap: wrap;
  }

  .widget-grid-item {
    padding: 5px;
    position: relative;
    box-sizing: border-box;
    background: $bgColorPrimary;
    border: $widget-container-border;
    border-radius: $radiusRegular;

    &.is-empty {
      background: $widget-container-bg-hover;
    }

    &:hover {
      border: $widget-container-border-hover;
    }

    &.active {
      background: $bgColorPrimary;
      border: $widget-container-border-active;
    }

    &::after {
      display: none;
    }
  }

  &.active {
    background: $widget-container-bg-active;

    .widget-grid-item {
      background: $bgColorPrimary;
    }
  }

  &:hover {
    background: $widget-container-bg-hover;

    &.active {
      background: $widget-container-bg-hover-active;
    }
  }

  .el-col {
    min-height: $widget-min-height;
  }

  &::after {
    display: none;
  }
}
